<template>
    <div class="userMage">
        <div class="search">
            <el-form :model="serchForm" :inline="true" class="demo-form-inline">
                <el-row :gutter="20" style="width:100%">
                    <el-col :span="6">
                        <el-form-item label="用户名称：">
                            <el-input v-model="serchForm.username" placeholder="请输入用户名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="账号：">
                            <el-input v-model="serchForm.phone" placeholder="请输入手机号码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-button type="primary">查询</el-button>
                        <el-button >重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%; height:88%;" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
                <el-table-column type="index" label="序号" width="100px" align="center" />
                <el-table-column prop="name" label="用户" width="160">
					<template #default="scope">
						<div style="display: flex; align-items: center">
							<img :src="scope.row.img" width="46" height="46" round>
							<span style="margin-left: 10px">{{ scope.row.name }}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="sex" label="性别" align="center" />
                <el-table-column prop="phone" label="账号" />
                <el-table-column prop="addTime" label="注册时间" />
				<el-table-column prop="flag" label="状态">
					<template #default="scope">
					    <span v-if="scope.row.flag === 0" style="color: #FF4F6D;">禁用</span>
						<span v-else-if="scope.row.flag === 1" style="color: #60DBB0;">正常</span>
					</template>
				</el-table-column>
                <el-table-column label="操作" align="center" width="260px">
                    <template #default="scope">
                        <el-button type="text" v-if="scope.row.flag === 1" @click="showEditUser(scope.row, scope.row.flag)">封禁</el-button>
                        <el-button type="text" v-if="scope.row.flag === 0" @click="showEditUser(scope.row, scope.row.flag)">解禁</el-button>
                        <el-button type="text" @click="queryDynamic(scope.row)">用户动态</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
		<div class="page" style="height:100px">
			<el-pagination background 
				layout="prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:total="total"
				:page-size='10'
				hide-on-single-page
				:current-page="currentPage"
			/>
		</div>
		
        <!-- 编辑 -->
        <el-dialog v-model="showEdit" title="编辑账号" width="480px">
           <p style="text-align:center;font-size:14px;font-weight:600;margin-bottom:10px" v-if="a == 1"> 确定封禁 {{userName}} ？</p>
           <p style="text-align:center;font-size:14px;font-weight:600;margin-bottom:10px" v-if="a == 0"> 确定解禁 {{userName}} ？</p>
		   <el-form ref="formadd" :model="form"  class="addFrom" label-position="top" label-width="160px" v-if="a == 1">
                <el-form-item label="封禁说明：">
                    <el-input type="textarea" v-model="form.explain" size="large"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showEdit = false">取消</el-button>
                    <el-button type="primary" @click="editSave">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
   
</template>

<script>
	import {editMonileUser} from '../../request/api/userMage/userMage'
	import {getCurrentTime} from '../../utils/index.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { getAllUserMobles } from '../../request/api/home/index'
	
    export default {
        name: 'UserList',
        data() {
            return {
                showAdd: false,
                showEdit: false,
                serchForm: {
                    username: '',
                    phone: ''
                },
				userName: "",
				userId: "",
				currentPage: 1, // 当前页
				pageSize: 10, // 每页显示14条数据
				total: 0,
                tableData: [],
                form: {},
				loading: false,
                a: 0
            }
        },
		created() {
			this.getUserLists()
		},
		mounted() {
		},
        methods: {
			// 获取用户列表
			getUserLists() {
				this.loading = true
				getAllUserMobles({
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
					        let list = res.data.userobj
							this.tableData = list
							this.total = res.data.total
							this.loading = false
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
			},
			// 点击编辑
            showEditUser(row, flag){
                this.showEdit = true
                this.a = flag
				this.userName = row.name
				this.form['id'] = row.id
                if (flag === 1) {
                    this.form['flag'] = 0
                } else if (flag === 0) {
                    this.form['flag'] = 1
                }
            },
			// 编辑完确认
			editSave() {
				this.showEdit = false
				editMonileUser(this.form)
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
							this.$message({
							    message: "修改成功",
							    type: 'success'
							})
					        this.getUserLists()
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
			},
			// 
			queryDynamic(row) {
				
			},
			handleSizeChange(val) {
				
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getUserLists()
			}
        }
    }
</script>

<style lang="scss" scoped>
.userMage {
   width: 100%;
	height: 100%;
    background-color: #F1F5F9 !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	.search {
		flex: 3;
        margin-bottom: 8px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 4px;
		padding: 12px;
		min-height: 50px;
		max-height: 50px;
		.el-form {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 50px;
			.el-form-item {
				display: flex;
				--font-size: 14px;
				margin-bottom: 0px; 
			}
		}
	}
	.table {
		flex: 16;
		// border: 1px solid #e0e0e0;
		padding: 12px;
        border-radius: 4px;
        background-color: #fff;
	}
    .page {
		flex: 1;
		padding: 12px;
        background-color: #fff;
        box-sizing: border-box;
        .el-pagination {
           float: right;
        }
	}
}
.addFrom {
    width: 100%;
    .el-form-item {
        width: 95%;
        .el-select{
            width: 100%;
        }
    }
}
</style>
